import React, { useState } from 'react';
import { Modal, Input, Checkbox, Button, Space } from 'antd';
import { MinusCircleOutlined } from '@ant-design/icons';

const { Search } = Input;

const specOptions = [
  { label: '张数', value: 'sheets' },
  { label: '片数', value: 'pieces' },
  { label: '档数', value: 'levels' },
  { label: '功能', value: 'function' },
  { label: '尺寸', value: 'size' },
  { label: '件数', value: 'quantity' },
  { label: '款式', value: 'style' },
  { label: '色数', value: 'colors' },
  { label: '盒数', value: 'boxes' },
  { label: '本数', value: 'books' },
  { label: '外观', value: 'appearance' },
  { label: '容量', value: 'volume' },
  { label: '颜色', value: 'color' },
  { label: '规格', value: 'specification' },
  { label: '型号', value: 'model' },
  { label: '尺码', value: 'size' }
];

const SpecificationModal = ({ visible, onCancel, onOk, selectedSpecs = [] }) => {
  const [searchText, setSearchText] = useState('');
  const [checkedSpecs, setCheckedSpecs] = useState(selectedSpecs);

  const filteredOptions = specOptions.filter(option => 
    option.label.toLowerCase().includes(searchText.toLowerCase())
  );

  const handleSearch = (value) => {
    setSearchText(value);
  };

  const handleCheckboxChange = (checkedValues) => {
    setCheckedSpecs(checkedValues);
  };

  const handleClear = () => {
    setCheckedSpecs([]);
  };

  const handleOk = () => {
    onOk(checkedSpecs);
  };

  const handleCancel = () => {
    setCheckedSpecs(selectedSpecs);
    onCancel();
  };

  const renderSelectedSpecs = () => {
    if (checkedSpecs.length === 0) return null;

    return (
      <div style={{ marginBottom: 16 }}>
        <div style={{ 
          display: 'flex', 
          justifyContent: 'space-between', 
          alignItems: 'center',
          marginBottom: 8 
        }}>
          <span>已选{checkedSpecs.length}项</span>
          <Button type="link" onClick={handleClear}>清空</Button>
        </div>
        {checkedSpecs.map(spec => {
          const option = specOptions.find(opt => opt.value === spec);
          return (
            <div 
              key={spec}
              style={{
                display: 'flex',
                justifyContent: 'space-between',
                alignItems: 'center',
                padding: '4px 0'
              }}
            >
              <span>{option?.label}</span>
              <MinusCircleOutlined 
                style={{ color: '#ff4d4f', cursor: 'pointer' }}
                onClick={() => setCheckedSpecs(specs => specs.filter(s => s !== spec))}
              />
            </div>
          );
        })}
      </div>
    );
  };

  return (
    <Modal
      title="添加规格"
      open={visible}
      onCancel={handleCancel}
      onOk={handleOk}
      width={800}
      footer={[
        <Button key="cancel" onClick={handleCancel}>取消</Button>,
        <Button key="ok" type="primary" onClick={handleOk}>确定</Button>
      ]}
    >
      <div style={{ display: 'flex', height: '400px' }}>
        <div style={{ flex: 1, borderRight: '1px solid #f0f0f0', padding: '0 16px' }}>
          <Search
            placeholder="搜索"
            onSearch={handleSearch}
            onChange={e => handleSearch(e.target.value)}
            style={{ marginBottom: 16 }}
          />
          <div style={{ marginBottom: 8 }}>
            共{filteredOptions.length}项 
            <Checkbox
              indeterminate={checkedSpecs.length > 0 && checkedSpecs.length < filteredOptions.length}
              checked={checkedSpecs.length === filteredOptions.length}
              onChange={(e) => handleCheckboxChange(e.target.checked ? filteredOptions.map(o => o.value) : [])}
            >
              全选
            </Checkbox>
          </div>
          <div style={{ height: 'calc(100% - 80px)', overflowY: 'auto' }}>
            <Checkbox.Group
              value={checkedSpecs}
              onChange={handleCheckboxChange}
              style={{ display: 'flex', flexDirection: 'column' }}
            >
              {filteredOptions.map(option => (
                <Checkbox key={option.value} value={option.value} style={{ margin: '8px 0' }}>
                  {option.label}
                </Checkbox>
              ))}
            </Checkbox.Group>
          </div>
        </div>
        <div style={{ width: '300px', padding: '0 16px' }}>
          {renderSelectedSpecs()}
        </div>
      </div>
    </Modal>
  );
};

export default SpecificationModal;
